<template>
  <div class="content">
    <scroll-view scroll-y style="height: 100%" @scroll="scrollFn" @scrolltolower="toLow" @scrolltoupper="test">
      <a :href="'/pages/article/main?id='+item.id" class="feed-li" v-for="(item,index) in list" :key="index">
        <div class="feed-title">
          <type-block :item="item"></type-block>
          <p>{{item.title}}</p>
        </div>
        <div class="feed-content">
          <avatar :user="item.author"></avatar>
          <div class="feed-right">
            <div class="feed-right-top">
              <div class="avatar-name">
                {{item.author.loginname}}
              </div>
              <div class="count">
                <span>{{item.reply_count}}</span> / &nbsp;{{item.visit_count}}
              </div>
            </div>
            <div class="feed-right-bottom">
              <div class="feed-time">
                {{item.createTime}}
              </div>
              <div class="feed-pass">
                {{item.lastReplyTime}}
              </div>
            </div>
          </div>
        </div>
      </a>
    </scroll-view>
  </div>
</template>

<script>
  import {topic} from '../utils/fly'
  import typeBlock from './type-block'
  import avatar from './avatar'
  import {formatTime, getTimeInfo} from '../utils/index'
  export default {
    name: 'content',
    data() {
      return {
        page: 1,
        articleList: []
      }
    },
    components: {
      typeBlock,
      avatar
    },
    props: ['currentTab'],
    methods: {
      async getList(page = 1) {
        wx.showLoading({
          title: '加载中...'
        })
        let params = {
          tab: this.currentTab.type,
          page,
          limit: 20
        }
        topic(params).then(res => {
          let result = res
          if (result.success) {
            this.articleList = this.articleList.concat(result.data)
          }
        })
        wx.hideLoading()
      },
      scrollFn(e) {
        // console.log(e)
      },
      toLow() {
        this.page++
        this.getList(this.page)
      },
      test(e) {
        // console.log(e)
      }
    },
    computed: {
      list() {
        return this.articleList.map(item => {
          delete item.content
          return Object.assign(item, {
            createTime: formatTime(new Date(item.create_at)),
            lastReplyTime: getTimeInfo(item.last_reply_at)
          })
        })
      }
    },
    created() {
      this.getList()
    }
  }
</script>

<style lang="scss" scoped>
  .content{
    height: 100%;
    .feed-li {
      padding: 10px;
      border-bottom: 1px solid $grey-border;
      .feed-title{
        display: flex;
        align-items: center;
        min-width: 0;
        p{
          margin: 0 0 0 8px;
          font-size: 14px;
          line-height: 24px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          flex: 1;
          min-width: 0;
        }
      }
      .feed-content {
        display: flex;
        position: relative;
        font-size: 13px;
        margin-top: 8px;
        .feed-right {
          flex: 1;
          min-width: 0;
          margin-top: 8px;
          .feed-right-top{
            display: flex;
            justify-content: space-between;
            .count {
              span {
                color: $light-color;
              }
            }
          }
          .feed-right-bottom {
            margin-top: 4px;
            display: flex;
            justify-content: space-between;
            .feed-time {
              font-size: 12px;
              color: $content-font-time;
            }
          }
        }
      }
    }
  }
</style>
